<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div style="width:100%;height:550px;">
    <iframe id="mapPage" width="100%" height="100%" frameborder=0>
    </iframe>
  </div>
</body>
<script>
  var callbackID
  var latitude
  var longitude
  var url = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=AMZBZ-DASWF-DQTJH-J2TYD-FLGAJ-JVB7F&referer=weixin2vue_map`
  window.onload = function () {
    callbackID = getQueryVariable("callbackID")
    latitude = getQueryVariable("latitude")
    longitude = getQueryVariable("longitude")

    if (latitude !== 'undefined') {
      url = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=AMZBZ-DASWF-DQTJH-J2TYD-FLGAJ-JVB7F&referer=weixin2vue_map&coord=${latitude},${longitude}`
    }

    document.getElementById('mapPage').src = url
  }

  function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == variable) { return pair[1]; }
    }
    return (false);
  }

  window.addEventListener('message', function (event) {
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    var loc = event.data;
    if (loc && loc.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      const location_value = {
        address: loc.poiaddress,
        errMsg: "chooseLocation:ok",
        latitude: loc.latlng.lat,
        longitude: loc.latlng.lng,
        name: loc.poiname
      }
      window.close()
      window.opener[callbackID](location_value)
    }
  }, false);
</script>

</html>